<template>
  <div class="sidebar">
    <div class="login-pic">
      <img
        src="http://www-wms-java.itheima.net/img/title.ef005a7a.png"
        alt=""
      />
    </div>
    <div style="margin-top: 40px">
      <el-col :span="24">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#fff"
          text-color="#000"
          active-text-color="#fff"
          :router=true
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span :to="{ path: '/DashBoard' }" index="DashBoard" >工作台</span>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>基础信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="WareHouse"  >仓库管理</el-menu-item>
              <el-menu-item index="GoodsAi">库区管理</el-menu-item>
              <el-menu-item index="KuQuReseRvoir">库位管理</el-menu-item>
              <el-menu-item index="LocaTion">库位视图 </el-menu-item>
              <el-menu-item index="LocationView">货品管理</el-menu-item>
              <el-menu-item index="TypeOfGoods">货品类型管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">货主管理</el-menu-item>
              <el-menu-item index="3-2">承运商管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>库内管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">盘点单</el-menu-item>
              <el-menu-item index="4-2">盘点任务</el-menu-item>
              <el-menu-item index="4-3">库存损益</el-menu-item>
              <el-menu-item index="4-4">实时库存</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>入库管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">入库单</el-menu-item>
              <el-menu-item index="5-2">收货任务</el-menu-item>
              <el-menu-item index="5-3">上架任务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>出库管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1">出库单</el-menu-item>
              <el-menu-item index="6-2">拣货任务</el-menu-item>
              <el-menu-item index="-2">交接任务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
  // DashBoard () {
  //   this.$router.push({
  //     path: 'DashBoard'
  //   })
  // }
}
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  width: 200px;
  //   height: 600px;
  // background-color: skyblue;
  background: #fff;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.login-pic {
  width: 130px;
  height: 64px;
}
.login-pic img {
  padding-left: 20px;
  padding-top: 20px;
  width: 130px;
  height: 64px;
}
</style>
